<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline form_top"
      >
        <el-form-item label="订单编号:">
          <el-input v-model="formInline.orderNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="选择日期:">
          <div class="block">
            <el-date-picker
              v-model="time"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <!-- table表格 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column type="index" label="序号" width="80px" />
          <el-table-column prop="orderNo" label="订单编号" width="200px" :show-overflow-tooltip="true" />
          <el-table-column prop="skuName" label="商品名称" />
          <el-table-column prop="price" label="订单金额(元)" />
          <el-table-column prop="innerCode" label="设别编号" />
          <el-table-column prop="status" label="订单状态">
            <template #default="{row}">
              <span>{{ row.status === 0 ? '待支付' : row.status === 1 ? '支付完成' : row.status === 2 ? '出货成功' : '出货失败' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="订单日期" />
          <el-table-column prop="address" label="操作" align="center">
            <template #default="{row}">
              <el-button
                type="text"
                class="button_table_foot"
                @click="openDialog (row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>共{{ totalCount }}条记录 第 {{ pageIndex }} / {{ totalPage }} 页</p>
          <div class="foot_button">
            <el-button
              type="info"
              :disabled="formInline.pageIndex === 1"
              :class="{'foot_button_foot' : true , 'isgrey' :formInline.pageIndex === 1}"
              @click="previous"
            >上一页</el-button>
            <el-button
              type="info"
              :disabled="pageIndex === totalPage"
              :class="{'foot_button_foot' : true , 'isgrey' :pageIndex === totalPage}"
              @click="next"
            >下一页</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="row"
      title="订单详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <div class="middle">
          <img v-if="row.status === 0" src="" alt="">
          <img v-else src="" alt="">
          <span>{{ row.status === 0 ? '待支付' : row.status === 1 ? '支付完成' : row.status === 2 ? '出货成功' : '出货失败' }}</span>
          <img src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt="" class="dailogImg">
        </div>
        <div class="dialogFoot">
          <div class="left">
            <p><span>订单编号:</span>{{ row.orderNo }}</p>
            <p><span>设备编号:</span>{{ row.innerCode }}</p>
            <p><span>完成时间:</span>{{ row.updateTime }}</p>
            <p><span>设备地址:</span>{{ row.addr }}</p>
          </div>
          <div class="right">
            <p><span>商品名称:</span>{{ row.skuName }}</p>
            <p><span>订单金额:</span>{{ row.price }}</p>
            <p><span>创建时间:</span>{{ row.createTime }}</p>
            <p><span>支付方法:</span>{{ row.payType === 1 ? '支付宝' : '微信支付' }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderList } from '@/api/order'
export default {
  name: 'Tektor',
  components: {},
  data() {
    return {
      formInline: {
        pageIndex: 1,
        pageSize: 10,
        orderNo: null,
        startDate: null,
        endDate: null
      },
      tableData: [
      ],
      pageIndex: null,
      totalCount: null,
      totalPage: null,
      time: null,
      dialogVisible: false,
      row: null,
      loading: false
    }
  },
  created() {
    this.renderList()
  },
  methods: {
    async  renderList() {
      this.loading = true
      const data = await getOrderList(this.formInline)
      this.totalCount = data.totalCount
      const res = data.currentPageRecords
      res.forEach(item => {
        item.price = item.price / 100
        item.createTime = item.createTime.replace('T', ' ')
      })
      this.tableData = res
      this.totalPage = data.totalPage
      this.pageIndex = data.pageIndex
      this.loading = false
    },
    onSubmit() {
      if (!this.time) {
        this.time = []
      }
      this.formInline.startDate = this.time[0]
      this.formInline.endDate = this.time[1]
      this.renderList()
    },
    next() {
      this.formInline.pageIndex += 1
      if (this.formInline.pageIndex > this.totalPage) {
        this.formInline.pageIndex = this.totalPage
      }
      this.renderList()
    },
    previous() {
      this.formInline.pageIndex -= 1
      if (this.formInline.pageIndex < 1) {
        this.formInline.pageIndex = 1
      }
      this.renderList()
    },
    close() {
      this.formInline.orderNo = null
      this.formInline.startDate = null
      this.formInline.endDate = null
    },
    openDialog(row) {
      this.row = row
      const index = this.row.addr.lastIndexOf('\-')
      this.row.addr = this.row.addr.substring(index + 1, this.row.addr.length)
      this.row.updateTime = this.row.updateTime.replace('T', ' ')
      this.row.createTime = this.row.createTime.replace('T', ' ')
      this.dialogVisible = true
      console.log(row)
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
.middle {
  position: relative;
  height: 50px;
  width: 100%;
  background-color: #f8f8f8;
  line-height: 50px;
    img {
      margin-left: 30px;
      position: relative;
      bottom: -5px;
    }
    span {
      margin-left: 20px;
    }
    .dailogImg {
      position: absolute;
      top: -16px;
      right: 70px;
    }
}
.dialogFoot{
  display: flex;
  margin-left: 25px;
  .left{
    flex: 1;
    p {
      margin-bottom: 20px;
     span {
      margin-right: 20px;
     }
    }
  }
  .right{
    flex: 1;
    margin-left: 20px;
      p {
      margin-bottom: 20px;
     span {
      margin-right: 20px;
     }
  }}
}
::v-deep .el-dialog{
    border-radius: 10px;
  }
::v-deep .el-dialog__body{
  padding-top: 10px;
}
  .isgrey { background-color: #edf0f9 !important; color: #d8dde6 !important;
}
</style>
